let main_box = document.querySelector("#main_box ul");
let change = document.querySelector(".change");
let before = document.querySelector(".before");
let after = document.querySelector(".after");
let pageid = 1;




const xhr1 = new XMLHttpRequest()
xhr1.open("get","http://chst.vip:1234/api/getmoneyctrl?pageid="+(pageid - 1),true);
xhr1.onload = function(){
    if(xhr1.status === 200){
        let res1 = JSON.parse(xhr1.responseText)
        console.log(res1);

        let main_boxs = "";

        let regExp = /(?<=imgurl=)[^'"]*/;

        res1.result.forEach(item => {

            let imgsrc = item.productImg2.match(regExp)[0];
        
            main_boxs += `<li id="${item.productId}" class="ali"><a href="#">
                            <div class="left">
                            <img src="${imgsrc}" alt="">
                            </div>
                            <div class="right">
                            <div class="title">
                                <h4>${item.productName}</h4>
                            </div>
                            <div class="other">
                                <span>${item.productFrom}|${item.productTime}</span>
                                <span>${item.productComCount}</span>
                            </div>
                            </div>
                            </a></li>`
        });
        main_box.innerHTML = main_boxs;

        var options = "";
        let pageZ = Math.floor(res1.totalCount / 10);
        // console.log(pageZ);
        for(var i = 1;i <= pageZ;i++){
            options += `<option value="${i}">${i}/${pageZ}</option>`
        }
        change.innerHTML = options;
        main_box.pageZ = pageZ;



        let aLi = document.querySelectorAll(".ali");
        console.log(aLi);
        aLi.forEach(index => {
            index.onclick = function(){
                let ID = index.id;
                console.log(ID);
                location.href = '../html/moneyctrlproduct.html?productid='+ ID
            }
        })


    }
}
xhr1.send(null);



//下一页
after.onclick = function(){
    pageid++;
    if(pageid > main_box.pageZ - 1){
        pageid = main_box.pageZ - 1;
    }
    // console.log(pageid,main_box.pageZ - 1);

    ajax(pageid);

    let options = document.querySelectorAll("option");
    // console.log(options);

    options[pageid].selected = true;
}


//上一页
before.onclick = function(){
    pageid--;
    if(pageid < 0){
        pageid = 0;
    }
    console.log(pageid,main_box.pageZ);

    ajax(pageid);

    let options = document.querySelectorAll("option");
    // console.log(options);

    options[pageid].selected = true;
}

change.onclick = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;

    pageid = target.value-1;
    
    ajax(pageid);
}





//封装
function ajax(pageid){
    const xhr = new XMLHttpRequest()
    xhr.open("get","http://chst.vip:1234/api/getmoneyctrl?pageid="+(pageid - 1),true);
    xhr.onload = function(){
        if(xhr.status === 200){
            let res = JSON.parse(xhr.responseText)
            console.log(res);
    
            let main_boxs = "";
    
            let regExp = /(?<=imgurl=)[^'"]*/;
    
            res.result.forEach(item => {
    
                let imgsrc = item.productImg2.match(regExp)[0];
            
                main_boxs += `<li id="${item.productId}" class="ali"><a href="#">
                                <div class="left">
                                <img src="${imgsrc}" alt="">
                                </div>
                                <div class="right">
                                <div class="title">
                                    <h4>${item.productName}</h4>
                                </div>
                                <div class="other">
                                    <span>${item.productFrom}|${item.productTime}</span>
                                    <span>${item.productComCount}</span>
                                </div>
                                </div>
                                </a></li>`
            });
            main_box.innerHTML = main_boxs;
            
            
            let aLi = document.querySelectorAll(".ali");
            console.log(aLi);
            aLi.forEach(index => {
                index.onclick = function(){
                    let ID = index.id;
                    console.log(ID);
                    location.href = '../html/moneyctrlproduct.html?productid='+ ID
                }
            })
        }
    }
    xhr.send(null);
}


$(".gotop").click(function(){
    $("html").animate({scrollTop:0},1000);
})
